<template>
	<div>
		<div style="height:40px;background-color: #FFFFFF;margin-top: 20px;" @click="goToMessage" class="pointer">
			<el-carousel height="40px" direction="vertical" :autoplay="true">
				<el-carousel-item v-for="item in messageList" :key="item.id">
					<el-col style="height:40px;" class="juZhong" :span="1">
						<span style="color:#409EFF;">
							<i class="el-icon-bell"></i>
						</span>
					</el-col>
					<el-col style="height:40px;" class="juZhong2" :span="2">
						<span style="color:#707070;">{{item.title}}</span>
					</el-col>
					<el-col style="height:40px;" class="juZhong2" :span="12">
						<span style="color:#707070;">{{item.text}}</span>
					</el-col>
					<el-col style="height:40px;" class="juZhong" :span="5">
						<span style="color:#707070;">{{item.datetime}}</span>
					</el-col>
					<el-col style="height:40px;" class="juZhong" :span="4">
						<span style="color:#707070;" >查看</span>
					</el-col>
				</el-carousel-item>
  			</el-carousel>
		</div>
		<div style="height:20px;background-color: #EFEFEF;"></div>
		<div style="height:220px;background-color: #FFFFFF;">
			<div style="height:80px;color:#707070">
				<el-col style="height:80px;" class="juZhong2">
					<span style="margin-left:20px;">{{'账号概要：您已累计发布'+zhaoPin+'条招聘，'+weiPei+'条委培。新职通已累计为您对接务工人员'+wuGong+'人！'}}</span>
				</el-col>
			</div>
			<div style="height:140px;color:#707070;">
				<div style="height:60px;">
					<el-col style="height:60px;" :span="8" class="juZhong">
						<span class="pointer" @click="goToMessage">新消息</span>
					</el-col>
					<el-col style="height:60px;" :span="8" class="juZhong">
						<span class="pointer" @click="goToPost">新增招聘报名</span>
					</el-col>
					<el-col style="height:60px;" :span="8" class="juZhong">
						<span class="pointer" @click="goToConsign">新增委培报名</span>
					</el-col>
				</div>
				<div style="height:80px;">
					<el-col style="height:80px;" :span="8" class="juZhong3">
						<span style="font-size:40px;font-width:400;" class="pointer" @click="goToMessage">{{newMessage}}</span>
					</el-col>
					<el-col style="height:80px;" :span="8" class="juZhong3">
						<span style="font-size:40px;font-width:400;" class="pointer" @click="goToPost">{{newZhaoPin}}</span>
					</el-col>
					<el-col style="height:80px;" :span="8" class="juZhong3">
						<span style="font-size:40px;font-width:400;" class="pointer" @click="goToConsign">{{newWeiPei}}</span>
					</el-col>
				</div>
			</div>
		</div>
		<div style="height:20px;background-color: #EFEFEF;"></div>
		<div style="height:380px;background-color:#FFFFFF;padding:20px;">
			<div style="height:40px;">
				<el-col style="height:40px;" class="juZhong2"> 
					<span style="color:#707070">最近编辑：</span>
				</el-col>
			</div>
			<div style="height:10px;"></div>
			<div class="bianJiBox">
				<div style="height:25px">
					<el-col :span="1" style="background-color:#409EFF;height:25px" class="juZhong">
					<span class="biaoQian">招聘</span>
					</el-col>
				</div>
				<div style="height:25px;"></div>
				<div style="height:50px;color:#707070">
					<el-col style="height:50px;" :span="8" class="juZhong">
						<span>{{postName}}</span>
					</el-col>
					<el-col style="height:50px;" :span="6" class="juZhong">
						<span>{{postState}}</span>
					</el-col>
					<el-col style="height:50px;" :span="6" v-show="postRequirePopulation!=0">
						<el-row style="height:50%;" class="juZhong">
							<span>报名人数/招聘人数</span>
						</el-row>
						<el-row style="height:50%;" class="juZhong">
							<span>{{postCount+'/'+postRequirePopulation}}</span>
						</el-row>
					</el-col>
					<el-col style="height:50px;float:right;" :span="4" class="juZhong">
						<el-button type="primary" @click="goToNewPost">新增</el-button>
					</el-col>
				</div>
			</div>
			<div style="height:15px;"></div>
			<div class="bianJiBox">
				<div style="height:25px">
					<el-col :span="1" style="background-color:#409EFF;height:25px" class="juZhong">
					<span class="biaoQian">委培</span>
					</el-col>
				</div>
				<div style="height:25px;"></div>
				<div style="height:50px;color:#707070;">
					<el-col style="height:50px;" :span="8" class="juZhong">
						<span>{{consignName}}</span>
					</el-col>
					<el-col style="height:50px;" :span="6" class="juZhong">
						<span>{{consignState}}</span>
					</el-col>
					<el-col style="height:50px;" :span="6" v-show="consignRequirePopulation!=0">
						<el-row style="height:50%;" class="juZhong">
							<span>报名人数/委培人数</span>
						</el-row>
						<el-row style="height:50%;" class="juZhong">
							<span>{{consignCount+'/'+consignRequirePopulation}}</span>
						</el-row>
					</el-col>
					<el-col style="height:50px;float:right;" :span="4" class="juZhong" >
						<el-button type="primary" @click="goToNewConsign">新增</el-button>
					</el-col>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				newWeiPei:'',
				newZhaoPin:'',
				newMessage:'',
				wuGong:'',
				weiPei:'',
				zhaoPin:'',
				pageSize:'',
				postName:'',
				postState:'',
				postRequirePopulation:0,
				postCount:0,
				consignName:'',
				consignState:'',
				consignRequirePopulation:0,
				consignCount:0,
				consignPageSize:'',
				messageList:[],
			}
		},
		mounted(){
			this.getAccountView();
			this.getPostNewEnroll();
			this.getConsignNewEnroll();
			this.getSystemMessages();
			this.getMessageList();
			this.getrecentEditorPost();
			this.getrecentEditorConsign();
		},
		methods:{
			getrecentEditorConsign(){
				var URL='http://47.101.180.43:8075//consign/recentEditorConsign'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
							console.log(response.data.data);
							this.consignName=response.data.data.consignName;
							this.consignState=response.data.data.state;
							this.consignCount=response.data.data.enrollPopulation;
							this.consignRequirePopulation=response.data.data.requirePopulation;
                        }else{
							console.log(response.data.msg); 
                            this.$notify({
                                message: response.data.msg,
                            });
                        }
                    }).catch(error => {
                    console.log('最近编辑委培获取失败');
                    });
			},
			getrecentEditorPost(){
				var URL='http://47.101.180.43:8075/post/recentEditorPost'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
							console.log(response.data.data);
							this.postName=response.data.data.postName;
							this.postState=response.data.data.state;
							this.postCount=response.data.data.enrollPopulation;
							this.postRequirePopulation=response.data.data.requirePopulation;
                        }else{
							console.log(response.data.msg); 
                            this.$notify({
                                message: response.data.msg,
                            });
                        }
                    }).catch(error => {
                    console.log('最近编辑招聘获取失败');
                    });
			},
			goToConsign(){
				this.$router.push({
                	path:'/companyPage/home/showConsign',
            	})
			},
			goToPost(){
				this.$router.push({
                	path:'/companyPage/home/showPost',
            	})
			},
			goToMessage(){
				this.$router.push({
                	path:'/companyPage/home/systemMessage',
            	})
			},
			getMessageList(){
				var URL='http://47.101.180.43:8075/message/newestSystemMessage'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
							size:10,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
							this.messageList=response.data.data;
							console.log(this.messageList);
                        }else{
                            console.log(response.data.msg); 
                        }
                    }).catch(error => {
                    console.log('消息列表获取失败');
					});
			},
		goToNewConsign(){
			this.$router.push({
                path:'/companyPage/home/newConsign',
            })
		},
		 goToNewPost(){
            this.$router.push({
                path:'/companyPage/home/newPost',
            })
        },
			getSystemMessages(){
				var URL='http://47.101.180.43:8075/message/numberOfSystemMessages'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
							this.newMessage=response.data.data;
							console.log(this.newMessage);
                        }else{
                            console.log(response.data.msg); 
                        }
                    }).catch(error => {
                    console.log('新增招聘报名获取失败');
                    });
			},
			getConsignNewEnroll(){
				var URL='http://47.101.180.43:8075/consign/consignNewEnroll'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
							this.newWeiPei=response.data.data;
							console.log(this.newWeiPei);
                        }else{
                            console.log(response.data.msg); 
                        }
                    }).catch(error => {
                    console.log('新增委培报名获取失败');
                    });
			},
			getPostNewEnroll(){
				var URL='http://47.101.180.43:8075/post/postNewEnroll'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
							this.newZhaoPin=response.data.data;
							console.log(this.newZhaoPin);
                        }else{
                            console.log(response.data.msg); 
                        }
                    }).catch(error => {
                    console.log('新增招聘报名获取失败');
                    });
			},
			getAccountView(){
				var URL='http://47.101.180.43:8075/companyUserInfo/companyAccountView'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
							this.zhaoPin=response.data.data.postCount;
							console.log(this.zhaoPin);
							this.weiPei=response.data.data.consignCount;
							console.log(this.weiPei);
							this.wuGong=response.data.data.peopleCount;
							console.log(this.wuGong);
                        }else{
                            console.log(response.data.msg); 
                        }
                    }).catch(error => {
                    console.log('概要获取失败');
                    });
			}
		},
	}
</script>

<style>
.pointer{
		cursor: pointer;
}
.biaoQian{
	color: #ffffff;
}
.bianJiBox{
	height:150px;
	border: 1px solid;
	border-color: #dad5d5;
}
.juZhong3{
    display:flex;
    /* align-items:center; */
    justify-content:center
  }
.juZhong2{
    display:flex;
    align-items:center;
    /* justify-content:center */
  }
.juZhong{
    display:flex;
    align-items:center;
    justify-content:center
}
</style>
